<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 箭头函数中的this:
        // 1. 箭头函数里面没有自己的this，使用的是外层的this
        // 2. 箭头函数不适合定义对象的普通方法 和 构造函数。

        // 定义一个对象，里面声明两个方法：info 和 demo
        const ob = {
            uname:"zhangsan",
            info:function(){
                console.log(this.uname);
            },
            demo:function(){
                // 箭头函数中的this，是指向外层的this(相当于箭头函数里面面没有this)
                const fn = () => {
                    console.log(this.uname);
                }
                fn();
            }
        }

        // 测试：
        ob.info();
        ob.demo();

        // 构造函数
        function Stu(name, age){
            this.name = name;
            this.age = age;
        }
        const s = new Stu("lisi",20);

        // 将上面的构造函数改成箭头函数
        // const Stu2 = (name,age)=>{
        //     console.log(this);
        // }
        // new Stu2("aa",12); // 报错 Stu2 is not a constructor


        // this的在箭头函数中的应用
        //定义一个stu学生对象，内有：两个属性、一个方法。
        const stu = {
            name:"张三",
            likes:['吃饭','睡觉','敲代码'],
            printLikes:function(){
                //使用map遍历likes属性，并输出信息
                // this.likes.map(function(like){
                //     //此处的this代表的是window对象，而非stu对象
                //     console.log(`${this.name} 喜欢 ${like}`);
                // });

                // 改成箭头函数
                this.likes.map((like) => {
                    // 在箭头函数中this指向的是外层的this，即stu对象
                    console.log(`${this.name} 喜欢 ${like}`);
                });
            }
        };
        stu.printLikes(); //使用stu对象调用自己的方法
        /* 输出结果：
        张三 喜欢 吃饭
        张三 喜欢 睡觉
        张三 喜欢 敲代码
        */

       
    </script>
</body>
</html>